<template>
  <div v-loading="loading">
    <iframe
      ref="iframe"
      :src="src"
      :style="iframeStyle"
      class="iframe"
    >
    </iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  name: 'IFrame',
  props: {
    src: {
      type: String,
      default: '',
    },
    height: String,
  },
  setup(props) {
    const loading = ref(false);
    const iframe = ref<HTMLIFrameElement>();

    const iframeStyle = {
      height: props.height,
    };

    const hide = (iframe?: HTMLIFrameElement) => {
      if (props.height && iframe) {
        iframe.style.height = props.height;
      }
      loading.value = false;
    };

    const loadIframe = () => {
      loading.value = true;

      setTimeout(() => {
        hide();
      }, 3000);

      setTimeout(() => {
        const clientHeight = document.documentElement.clientHeight;
        if (!iframe.value) return;
        iframe.value.style.height = `${clientHeight}px`;
      }, 100);

      (iframe.value as HTMLIFrameElement).onload = () => {
        hide(iframe.value);
      };
    };

    onMounted(() => {
      loadIframe();
    });

    return {
      iframeStyle,
      iframe,
      loading,

      hide,
    };
  },
});
</script>

<style lang="scss" scoped>
.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
